<template>
  <div id="more">
    <my-skeleton v-if="initLoading"></my-skeleton>
    <div v-else>
      <s-nav-bar :title="$route.meta.title"></s-nav-bar>
      <router-view></router-view>
      <load-more :show="dataLoading"></load-more>
      <to-top v-show="showTop"></to-top>
    </div>
  </div>
</template>

<script>
import MySkeleton from '@/components/MySkeleton.vue'
import sNavBar from '@/components/sNavBar.vue'
import BookList from '@/components/BookList.vue'
import ToTop from '@/components/ToTop.vue'
import LoadMore from '@/components/LoadMore.vue'
export default {
  components:{
    sNavBar,
    BookList,
    MySkeleton,
    ToTop,
    LoadMore
  },
  data(){
    return {
      initLoading:true,
      dataLoading:false,
      showTop:false,
      datalist:null,
      scrollEvent:null,
      page:1,
      count:0,
      nothing:false
    }
  },
  methods:{
    toTop(){
      document.documentElement.scrollTop = 0
      document.body.scrollTop = 0
    },
    scrollevent(){
      let docEl = document.documentElement,
        body = document.body,
        ajax = null;
      return ()=>{ 
        let scrollTop = docEl.scrollTop|| body.scrollTop
        if(this.initLoading || this.$route.path =='/more/list'){
          return
        }
        if(scrollTop > docEl.clientHeight){
          this.showTop = true
        }else{
          this.showTop = false
        }

        if(!ajax && scrollTop + docEl.clientHeight >= docEl.scrollHeight) {
    
          if(!navigator.onLine){
            return this.$toast({
              message:'现在处于离线浏览',
              position: 'bottom'
            });
            
          }else if(this.nothing){
            return this.$toast({
              message:'没有更多了',
              position: 'bottom'
            });
          }
          this.dataLoading = true;
          ajax = this.$http.get(this.$route.meta.dataURL,{
            params:{page:++this.page}
          })
          .then(res => {
            let {datalist} = res.data.data
            
            if(!datalist){
              this.dataLoading = false
              this.nothing = true
              ajax = null
              return this.$toast({
                message:'没有更多了',
                position: 'bottom'
              });
            }
            setTimeout(()=>{
              this.dataLoading = false
              ajax = null
              this.datalist = this.datalist.concat(datalist)
            },1000)
        
          })
          .catch(err => {
            throw ('NET ERROE!')
          })
        }
      }
    }
  },
  created(){
    if(!this.$route.meta.dataURL){
      this.initLoading = false
      return
    }
    this.$http.get(this.$route.meta.dataURL)
    .then(res => {
      let {datalist,count} = res.data.data
      this.datalist = datalist
      this.count = count || this.count
      setTimeout(()=>{
        this.initLoading = false
      },1000)
    })
    .catch(err => {
      throw ('NET ERROE!')
    })
  },
  mounted(){  
    this.scrollEvent = this.scrollevent()
    window.addEventListener('scroll', this.scrollEvent)
  },
  destroyed(){
    window.removeEventListener('scroll', this.scrollEvent);
  }
}
</script>

<style>
#more{
  overflow:hidden;
}
</style>